import React, { Component } from 'react';
import {
    AppOutline,
    ShopbagOutline,
    UnorderedListOutline,
    UserOutline,
} from 'antd-mobile-icons'
import { TabBar } from 'antd-mobile'
import { withRouter } from 'react-router-dom'
import './Tabbar.scss'
interface State {
    tabs: any,
    activeKey: string
}
interface Tabbar {
    props: any
    state: State
}
class Tabbar extends Component {
    constructor(props: any) {
        super(props)
        this.state = {
            tabs: [
                {
                    key: '/index/home',
                    title: '首页',
                    icon: <AppOutline />,
                },
                {
                    key: '/index/kind',
                    title: '分类',
                    icon: <UnorderedListOutline />,
                },
                {
                    key: localStorage.getItem('token') ? '/index/cart' : '/login',
                    title: '购物车',
                    icon: <ShopbagOutline />,
                },
                {
                    key: localStorage.getItem('token') ? '/index/mine' : '/login',
                    title: '我的',
                    icon: <UserOutline />,
                },

            ],
            activeKey: '/index/home'
        }

    }
    componentDidMount(): void {
        // console.log(this.props)
    }
    setRouteActive(value: any) {
        // console.log(value);
        this.setState({
            activeKey: value
        })
        this.props.history.push(value)
        // console.log(this.props.location.pathname)
    }
    render() {
        return (
            <div className='tabbar'>
                <TabBar activeKey={this.props.location.pathname} onChange={value => this.setRouteActive(value)}>
                    {this.state.tabs.map((item: any) => (
                        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                    ))}
                </TabBar>
            </div>
        );
    }
}

export default withRouter(Tabbar);